<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语义化标签</title>
  </head>
  <body>
    <h1>语义化标签</h1>

    <h2>span 标签</h2>
    <p>
      商品价格：
      <span>368</span>
      元，优惠价：
      <span>298</span>
      元
    </p>

    <h2>文本格式化标签</h2>
    b标签：
    <b>定义粗体文本</b>
    <br />
    <br />
    em标签：
    <em>表示被强调的文本</em>
    <br />
    <br />
    i标签：
    <i>斜体</i>
    <br />
    <br />
    u标签：
    <u>定义文本下划线</u>
    <br />
    <br />
    strong标签：
    <strong>定义加重语气，表示特别重要的文字</strong>
    <br />
    <br />
    del标签：
    <del>定义删除字</del>
    <br />
    <br />
    mark标签：
    <mark>一段需要被高亮的文本</mark>

    <h3>sub 标签</h3>
    <p>
      碳在氧气中充分燃烧：C + O
      <sub>2</sub>
      = CO
      <sub>2</sub>
    </p>
    <p>
      铁在氧气中燃烧： 3Fe + 2O
      <sub>2</sub>
      = Fe
      <sub>3</sub>
      O
      <sub>4</sub>
    </p>

    <h3>sup 标签</h3>
    <p>
      2
      <sup>3</sup>
      + 3
      <sup>2</sup>
      = 17
    </p>

    <h3>pre 预格式化文本</h3>
    <div>
      <pre>
            <code>
                /*清除浮动*/
                .clearfix::after{
                display:block;
                content:11 11;
                clear:both;
                }

                &lt;div class="box clearfix"&gt;
                &lt;div class="left"&gt;左&lt;/div&gt;
                &lt;div class="right"&gt;中&lt;/div&gt;
                &lt;div class="middle"&gt;中&lt;/div&gt;
                &lt;/div&gt;

            </code>
        </pre>
    </div>

    <h3>time 标签</h3>

    <p>
      会议将于
      <time datetime="2038-09-15T08:30">9月15日上午8:30</time>
      开始。
    </p>

    <h3>code标签</h3>
    <p>计算机片段代码</p>
    <div>
      <code>console.Log(12)</code>
    </div>
    <h3>kbd标签</h3>
    <p>键盘输入文本</p>
    <div>
      VSCode快捷键：按
      <kbd>Ctrl+ALt+up/down</kbd>
      实现多行文本同时编辑
    </div>

    <h3>samp 标签</h3>
    <p>程序输出样本</p>
    <div>
      输出结果为：
      <samp>HeLLoWorLd！</samp>
    </div>
    <h3>var标签</h3>
    <p>变量名</p>
    <div>
      定义一个变量：
      <var>x</var>
      =100
    </div>

    <h3>abbr标签</h3>
    <p>缩写词</p>
    <div>
      <abbr title="Hello World">HW</abbr>
    </div>
    <h3>q 标签</h3>
    <p>短引用</p>
    <div>
      她说：
      <q>你好！</q>
    </div>

    <h3>blockquote标签</h3>
    <p>长引用</p>
    <div>
      <blockquote>这是一个长引用的内容</blockquote>
    </div>

    <h3>cite标签</h3>
    <p>引用来源</p>
    <div>
      这些内容出自
      <cite>《乔布斯传》</cite>
    </div>

    <h3>dfn标签</h3>
    <p>定义书术语</p>
    <div>
      <dfn>HTML</dfn>
      是一个标记语言
    </div>

    <h3>dfn 标签</h3>
    <p>定义书术语</p>
    <div>
      <dfn>HTML</dfn>
      是一个标记语言
    </div>

    <h3>b标签</h3>
    <p>视觉加粗</p>
    <div>
      我是
      <b>一个加粗</b>
      的文本
    </div>

    <h3>i标签</h3>
    <p>斜体文本</p>
    <div>
      我是一个
      <i>斜体文本内容</i>
    </div>

    <h3>figure、figcaption 标签</h3>
    <p>代表一段独立的内容，与figcaption配合使用。figure 标签规定独立的流内容（图像、图表、照片、代码等等）。一个独立的引用单元，标签为figure 元素定义标题</p>
    <p>
      <figure>
        <img src="https://img2.baidu.com/it/u=2037086759,145885824&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1279" width="200px" alt="lock" />
        <figcaption>小米智能家居，智能门锁</figcaption>
      </figure>

      <figure>
        <img src="https://t14.baidu.com/it/u=1739492386,3380321402&fm=224&app=112&f=JPEG?w=396&h=500" width="200px" alt="car" />
        <figcaption>小米智能家居，平衡车</figcaption>
      </figure>
    </p>
  </body>
</html>
